<template>
  <!-- 歌手详情 -->
  <div class="details" v-if="introducelist !== null">
    <div class="imgbox">
      <img :src="introducelist.cover" alt="" />
      <span
        class="iconfont icon-fangxianganniu1"
        @click="$router.go(-1)"
      ></span>
    </div>
    <div class="explain">
      <h3>{{ introducelist.name }}</h3>
      <p>{{ introducelist.briefDesc }}</p>
      <span class="iconfont icon-star" @click="CollectionSinger" v-show="stars==1"></span>
      <span class="iconfont icon-star-full" @click="delCollectionSinger" v-show="stars==2"></span>
      <div class="smallbox">
        <img :src="introducelist.cover" alt="" />
      </div>
    </div>
    <van-tabs
      v-model="activeName"
      background="#f4f4f4"
      title-active-color="#ee0a24"
    >
      <van-tab title="热门播放50" name="a">
        <div class="content">
          <ul>
            <li v-for="ele in hotfifty" :key="ele.id" @click="single(ele.id)">
              <div class="hotbox">
                <img :src="ele.al.picUrl" alt="" />
              </div>
              <h5>{{ ele.al.name }}</h5>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="MV" name="b">
        <div class="content">
          <van-empty
            image="search"
            description="无"
            v-show="singermv == null"
          />
          <ul>
            <li v-for="ele in singermv" :key="ele.id" @click="SingleMv(ele.id)">
              <div class="hotbox">
                <img :src="ele.imgurl" alt="" />
              </div>
              <h5>{{ ele.name }}</h5>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="专辑" name="c">
        <div class="content">
          <van-empty image="search" description="无" v-show="Album == null" />
          <ul>
            <li
              v-for="ele in Album"
              :key="ele.id"
              @click="AlbumContent(ele.id)"
            >
              <div class="hotbox">
                <img :src="ele.picUrl" alt="" />
              </div>
              <h5>{{ ele.name }}</h5>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {
  getSingerDetails,
  getHotfifty,
  getSingerMv,
  getSingerAlbum,
  getCollectionSinger,
} from "../../api/SingerDetails";
export default {
  props: ["id"],
  data() {
    return {
      introducelist: null,
      activeName: "a",
      hotfifty: null,
      singermv: null,
      Album: null,
      stars: 1,
    };
  },
  methods: {
    single(id) {
      this.$emit("get-player-id", id);
    },
    SingleMv(id) {
      this.$emit("getMvPlayerId", id);
      document.querySelector(".mvplayer").webkitRequestFullscreen(); //触发div全屏
    },
    AlbumContent(id) {
      this.$router.push({
        name: "SingerAlbum",
        params: {
          id: id,
        },
      });
    },
    delCollectionSinger() {
      getCollectionSinger(this.id, 2).then((data) => {
         if(data.code===200){
          this.stars=1;
          Toast('已取消收藏');
        }
      });
    },
    CollectionSinger() {
      getCollectionSinger(this.id, 1).then((data) => {
        if(data.code===200){
          this.stars=2;
          Toast('收藏成功');
        }
      });
    },
  },
  created() {
    getSingerDetails(this.id).then((data) => {
      this.introducelist = data.data.artist;
    });
    getHotfifty(this.id).then((data) => {
      this.hotfifty = data.songs;
    });
    getSingerMv(this.id).then((data) => {
      this.singermv = data.mvs;
    });
    getSingerAlbum(this.id).then((data) => {
      this.Album = data.hotAlbums;
      console.log(data);
    });
  },
};
</script>

<style lang="less" scoped>
.details {
  width: 100%;
  .imgbox {
    position: relative;
    width: 100%;
    height: 282px;
    & > img {
      width: 100%;
      height: 100%;
    }
    span {
      position: absolute;
      font-size: 20px;
      color: #ee0a24;
      top: 10px;
      left: 10px;
    }
  }
  .explain {
    position: relative;
    top: -26px;
    height: 176px;
    margin: 0 16px;
    background-color: #fff;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    padding-top: 40px;
    border-radius: 10px;
    h3 {
      font-size: 20px;
      margin-bottom: 14px;
    }
    p {
      width: 166px;
      margin: 0 auto;
      color: #dddddd;
      margin-bottom: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    span {
      font-size: 24px;
    }
    .smallbox {
      position: absolute;
      left: 50%;
      top: -40px;
      transform: translateX(-50%);
      border-radius: 50%;
      width: 68px;
      height: 68px;
      overflow: hidden;
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .van-tabs {
    margin: 0 16px;
  }
  .content {
    li {
      display: flex;
      margin-top: 20px;
      padding: 10px 16px;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      .hotbox {
        width: 45px;
        height: 45px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    h5 {
      padding: 22px 8px 0 16px;
      margin-left: 20px;
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>